<template>
	<view>
		<view style="margin-bottom: 24rpx;" class="info-box">
			<view class="info-title">问题基本信息</view>
			<view class="info-item">
				<view class="info-label">问题主题：</view>
				<view> {{ruleForm.title}}</view>
			</view>
			<view class="info-item">
				<view class="info-label">创建时间：</view>
				<view> {{ ruleForm.createTime }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">问题类型：</view>
				<view style="flex-wrap: wrap;" class="start_layout">
					<view class="tag-item" v-for="(item,index) in ruleForm.type.split(',')" :key="index">
						{{typeArr.filter(a=>a.dictValue==item)[0].dictLabel}}
					</view>
				</view>
			</view>
			<view v-if="ruleForm.projectId" class="info-item">
				<view class="info-label">关联项目：</view>
				<view @click="toProject" class="r-tag"> {{ ruleForm.projectName }}</view>
			</view>
			<view class="info-item">
				<view class="info-label">问题描述：</view>
				<view> {{ ruleForm.description }}</view>
			</view>
			<view v-if="ruleForm.hasAppraise==0" class="info-item">
				<view class="info-label">评价满意度：</view>
				<view>
					<u-rate readonly v-model="ruleForm.appraiseSatisfaction"></u-rate>
				</view>
			</view>
			<view v-if="ruleForm.hasAppraise==0" class="info-item">
				<view class="info-label">评价内容：</view>
				<view> {{ ruleForm.appraiseContent }}</view>
			</view>
		</view>
		<processCard :detailInfo="detailInfo"></processCard>
	</view>
</template>

<script>
	import {
		getQuestion,
		evaluationDetail,
		getDicts
	} from "@/utils/api.js";
	export default {
		data() {
			return {
				id: "",
				detailInfo: {},
				ruleForm: {},
				typeArr: []
			};
		},
		onLoad(option) {
			this.id = option.id
			this.getInfo()
		},
		methods: {
			getInfo() {
				uni.showLoading({
					title: '加载中'
				});
				getQuestion(this.id).then((response) => {
					if (response.code == 200) {
						this.ruleForm = response.data
						uni.hideLoading();
					} else {
						uni.hideLoading();
						uni.showToast({
							title: response.msg,
							icon: 'none'
						})
					}
				});
				evaluationDetail(this.id, 'process_wtfk').then(res => {
					this.detailInfo = res.data
				})
				getDicts('wtlx').then(res => {
					this.typeArr = res.data
				})
			},
			toProject() {
				uni.navigateTo({
					url: '/pages_two/project/projectDetail?id=' + this.ruleForm.projectId
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-area {
		background-color: #fff;
		padding: 10rpx 20rpx;
	}

	.info-box {
		background-color: #fff;
		margin-top: 30rpx;
		padding: 10rpx 30rpx;
	}

	.info-item {
		display: flex;
		justify-content: flex-start;
		align-items: flex-start;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		line-height: 48rpx;
		margin: 15rpx 0;

		.info-label {
			color: #999999;
			flex-shrink: 0;
		}
	}

	.btn-default {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #1478FF;
		background: #FFFFFF;
		border-radius: 50rpx;
		border: 1rpx solid #1478FF;
		padding: 24rpx;
		width: 300rpx;
		text-align: center;
	}

	.btn-active {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #FFFFFF;
		background: #1478FF;
		border-radius: 50rpx;
		border: 1rpx solid #1478FF;
		padding: 24rpx;
		width: 300rpx;
		text-align: center;
	}

	.radio-btn {
		width: 130rpx;
		height: 100rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
		background: #FFFFFF;
		border-radius: 4rpx;
	}

	.state-area {
		padding: 30rpx;
	}

	.r-tag {
		color: #1478FF;
	}

	.l-tag {
		flex-shrink: 0;
		margin-right: 24rpx;
	}

	.tag-item {
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 24rpx;
		color: #004CA2;
		background: #F0F4FA;
		border-radius: 8rpx;
		padding: 6rpx 12rpx;
		margin-right: 10rpx;
		margin-bottom: 10rpx;
		flex-shrink: 0;
	}
</style>